.chanpin {
    position: relative;

    .product {
        z-index: 9;
        opacity: 0;
        visibility: hidden;
        width: fit-content;
        position: absolute;
        top: 80px;
        left: -300px;
        background: #FFFFFF;
        border-radius: 10px;
        color: #000;
        box-shadow: 4px 6px 34px 0 rgba(117, 141, 168, .51);
        padding: 30px;
        border: 1px #fff solid;

        .product_mask {
            margin-top: 100px;

            .product_title {
                color: #a0a4a7;
                font-size: 20px;
            }

            .product_a {
                margin: 20px 0px;
                display: flex;
                flex-direction: row;

                .product_content {
                    width: fit-content;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-around;
                    align-items: center;
                    border-radius: 10px;
                    padding: 10px 10px;

                    .product_content_left {
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        img {
                            width: 80px;
                        }
                    }

                    .product_content_right {
                        margin-left: 16px;
                        width: 260px;
                        height: 80px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;

                        .text_a {
                            display: flex;
                            align-items: center;

                            div {
                                width: fit-content;
                                white-space: nowrap; //(如果是 normal，则默认是自动换行) 
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }

                            img {
                                width: 20px;
                                opacity: 0;
                                transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
                                transform: translateX(0);
                            }
                        }

                        .text_b {
                            font-weight: normal;
                            color: #a0a4a7;
                            font-size: 20px;
                            white-space: nowrap; //(如果是 normal，则默认是自动换行) 
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }

                .product_content:hover {
                    background-color: #e8eaf5;
                    transition: 0.5s;
                    cursor: pointer;

                    .text_a {
                        color: #1f4dd8;

                        img {
                            opacity: 1;
                            transform: translateX(10px);
                            /* 这里的值可以根据需要调整 */
                        }
                    }

                    .text_b {
                        color: #333;
                    }
                }
            }
        }

    }

}

.chanpin:hover {
    .product_mask {
        margin-top: 0px;
        transition: 1s;
    }
}